<html>
<head>
    <meta charset="utf-8">
    <title>game</title>
    <style type="text/css">
        body{
            background-color: black;//设置背景颜色
        }
        .img{
            width: 300px;
            height: 300px;
            position: absolute;//设置绝对位置
        }
    </style>
</head>
<body>

<img src="player_right.gif" class="img" style="top: 0px; left:0px;"/>
<script src="JQuery.min.js"></script>
<script>
    function Change(){
        $("img").dblclick(function(){//双击变身,dblclick双击
            $("img").attr("src","player2.gif");//一个参数获取，两个参数设置
            move();

            $("img").dblclick(function(){//再双击还原
                $("img").attr("src","player_right.gif");
                move2();
            })

        })

    }


    //switch实现
    function move(){
        $(window).keydown(function(e){//键盘按下的事件，用e来接收
            let top = parseInt($("img").css("top"));//将字符串解析成整数
            let left = parseInt($("img").css("left"));
            switch(e.keyCode){//用于获取代表键盘上的键的数字
                case 87:
                    $("img").css("top",top - 50);
                    break;
                case 83:
                    $("img").css("top",top + 50);
                    break;
                case 65:
                    $("img").attr("src","playerbig_left.gif");
                    $("img").css("left",left - 50);
                    break;
                case 68:
                    $("img").attr("src","playerbig_right.gif");
                    $("img").css("left",left + 50);
                    break;
                default:
                    break;
            }
        })
    }

    //if实现
    function move2(){
        $(window).keydown(function(e){
            let top = parseInt($("img").css("top"));
            let left = parseInt($("img").css("left"));
            if(e.keyCode == 87) {
                $("img").css("top",top - 50);
            }else if(e.keyCode == 83){
                $("img").css("top",top + 50);
            }else if(e.keyCode == 65){
                $("img").attr("src","player_left.gif");
                $("img").css("left",left - 50);
            }else if(e.keyCode == 68){
                $("img").attr("src","player_right.gif");
                $("img").css("left",left + 50);
            }
        })
    }

    $(function(){
        Change();
        move2();
        // move();
    })

</script>
</body>
</html>
